<!--
 * @FilePath     : /study_code/jquery/index copy.html
 * @Description  : jq 尺寸 api 设置尺寸
 * @Date         : 2025-04-21 09:11:14
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-21 09:11:19
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <!-- <link rel="stylesheet" href="" /> -->
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
        padding: 10px;
        border: 15px solid red;
        margin: 20px;
        transition: all 1.5s;
      }
    </style>
  </head>
  <body>
    <!-- HTML结构 -->
    <div></div>

    <button id="d1">设置 width</button>
    <button id="d2">设置 innerWidth</button>
    <button id="d3">设置 outerWidth</button>

    <script src="/jquery/dist/jquery.min.js"></script>
    <script>
      // tip: log 要点击多次才可获取正确值（因为 api 是异步执行的，代码是同步的）

      $(function () {
        // 1. width() / height() 获取设置元素的 width和height大小
        // 无参数为获取，有参数为设置
        console.log($('div').width()) // 200
        $('#d1').on('click', function () {
          $('div').width(300) // 数字直接写，不需要带单位
          console.log('1x', $('div').width()) // 300
        })

        // 2. innerWidth() / innerHeight() 获取设置元素的 width和height + padding大小
        $('#d2').on('click', function () {
          $('div').innerWidth(400)
          console.log('2x', $('div').innerWidth()) // 400
        })

        // 3. outerWidth() / outerHeight() 获取设置元素的 width和height + padding + border大小
        $('#d3').on('click', function () {
          $('div').outerWidth(500)
          console.log('3x', $('div').outerWidth()) // 500
          // 4. outerWidth(true) / outerHeight(true) 获取设置元素的 width和height + padding + border + margin大小
          console.log('4x', $('div').outerWidth(true)) // 540
        })
      })
    </script>
  </body>
</html>
